
// main rem font base and rem calc function
$rem-base: 16 !default;
@function rem-calc($pxWidth) {
  @return $pxWidth / $rem-base * 1rem;
}

$row-max-width: rem-calc(1200);

// font family
$main-font: 'DejaVu Sans Mono', monospace;
$main-font-weight: 200;

$headers-font: 'DejaVu Sans', sans-serif;
$headers-weight: 900;
$headers-transform: none;

// colors

$color-main-dark: #23222D;
$color-main-light: #ffffff;
//$color-main-contrast: #FF4D4D;
$color-main-contrast: #90A54A;
$color-headers: $color-main-dark;
$color-comment-header-link: #FFF200;
$color-error: #EF3B3A;

// custom theme mixins
// example:
// clearfix usage:
//  .some-div {
//      ...
//      @extend %clearfix;
//  }

%clearfix {
    &:before,
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

@mixin green-button {
    display: inline-block;
    padding: rem-calc(5) rem-calc(15);
    background: $color-main-contrast;
    color: $color-main-light;
    font-weight: 400;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    border-radius: rem-calc(3);
    margin-bottom: rem-calc(3);
    &:hover {
        color: $color-main-light;
        background: lighten($color-main-contrast, 5%);
    }
    &:focus, &:active {
        color: $color-main-light;
    }
}

@mixin corner-link {
    &:after {
        // https://www.w3schools.com/charsets/ref_utf_arrows.asp
        content: '\21B5';
    }
    &:hover, &:focus, &:active {
        color: darken($color-main-contrast, 10%);
    }
    &.anima-image-popup:after {
        content: '';
    }
}

@mixin avatar-style {
    box-sizing: content-box;
    border: $color-main-light 3px solid;
    background: $color-main-light;
    padding: 0;
    height: 80px;
    width: 80px;
    margin-right: 0.6em;
    float: left;
    border-radius: rem-calc(7);
    img {
        border-radius: rem-calc(6);
    }
}

@mixin read-more-button {
    margin-top: rem-calc(10);
    margin-bottom: rem-calc(10);
    display: inline-block;
    padding: rem-calc(10) rem-calc(30);
    border: rem-calc(3) solid $color-main-dark;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    color: $color-main-dark;
    font-size: rem-calc(12);
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    &:hover {
        color: $color-main-light;
        background-color: $color-main-dark;
        text-decoration: none;
    }
    &:active, &:focus {
        color: $color-main-light;
        background-color: $color-main-dark;
    }
}

@mixin social-icons {
    .icon svg {
        height: 2em;
        width: auto;
        fill: #FFF;
        -webkit-transition: fill 0.5s;
        transition: fill 0.5s;
        &:hover {
            fill: $color-main-contrast;
        }
    }
    .icon.icon-telegram svg:hover {
        fill: #2AABEE;
    }
    .icon.icon-rss svg:hover {
        fill: #EE802F;
    }
    .icon.icon-mastodon svg:hover {
        fill: #6364FF;
    }
    .icon.icon-gitverse svg:hover {
        fill: #525EE1;
    }

    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .icon svg {
            width: 2em;
        }
    }
}

@mixin flash-messages {
    .success-flash {
        padding: 0 rem-calc(15) rem-calc(15);
        .success-flash-content {
            background-color: #E3F2C1;
            color: $color-main-contrast;
            padding: rem-calc(30);
        }
    }
}
